  
<!DOCTYPE html>
<html lang=zh-cmn-Hans>
<head>
	
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>George Guo的网站</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<link  href="/questiongame/style.css"  type="text/css" rel="stylesheet">
	<!-- <script type=module defer src="/questiongame/quespage.js"></script> -->

</head>
  <div id='Index'>
    <h3 >我发布的问卷</h3>
	<button id="btn1" class="btnClass" style="display: inline-block; position: (200,0);">选择</button>
	<button id="btn2" style="display:inline-block">问答</button>
	<!-- <button id="btn3" style="display:inline-block">000</button> -->
</div>
  <body >
	
	<nav id="divide1">
	<header>
		<h1 >我的问答题<a></a> </h1>
	</header>
        
		<div  class="wrapper">
			<ul>
				<li><a href="index.html">主页</a></li>
				<li><a href="myaccount.html">我的</a></li>
				<li><a href="subpage.html">问卷</a></li>
				<li><a href="secretpage.html">分享</a></li>
			</ul>
					
		<hr>
	    <input type="button" onclick="upsubjanswers()" value="上传答案">
	    </div>
	
  </nav>
  <nav id='divide2'>
	<div  id='container'>
		<div id="question-container" class="hide">
		  <div id="question">Question</div>
		  <div id="answer-buttons" class="btn-grid">
			<button class="btn">Answer 1</button>
			<button class="btn">Answer 2</button>
			<button class="btn">Answer 3</button>
			<button class="btn">Answer 4</button>
		  </div>
		</div>
		<br></br>
		<div class="controls">
		  <button id="start-btn" class="start-btn btn">Start</button>
		  <button id="next-btn" class="next-btn btn hide">Next</button>
		</div>
	  </div>
	</nav>
</body>
	
			
	
	<script>
		    if ( localStorage.getItem('currentUSER')){
			var userid = localStorage.getItem('currentUSER')
			document.getElementById('divide1').classList.add('hide')
	          /***************************************************************载入主观题**************************************************/
	  	        $.ajax({
					type:'GET',
					url:'/myarbitras/',
					contentType: "application/json",
					data: body ={"获取":"全部问题","用户":`${userid}` },
					success: function(){console.log('获取请求已发送')
					},
					}).then((res)=>{

					var recieve = JSON.parse(res)
					console.log(recieve.编辑好的主观题)
					var subjQuestions = recieve.编辑好的主观题
					for (var o =0; o< subjQuestions.length;o++){
						if (subjQuestions[o]!=""){
						var subjquestion =document.createElement('p')
						subjquestion.setAttribute('class','subjquestions')
						subjquestion.innerText=subjQuestions[o]
						var subjqueframe= document.querySelector('.wrapper')
						
						var subjanswer =document.createElement('input')
						subjanswer.setAttribute('class', 'subjanswers')
						subjanswer.setAttribute('type', 'text')
						subjqueframe.append(subjquestion)
						var br =document.createElement('br')
						subjqueframe.append(br)
						subjqueframe.append(subjanswer)
						subjqueframe.append(br)
					}
					}
				})

			/*************************************************上传主观题回答***************************************************/
			
			
			function upsubjanswers(){
				    console.log(choosedCollecion)
                    var actmodel ={}
					actmodel.来自用户= userid
					actmodel.answers={}
					actmodel.answers.主观题答案=[]
					actmodel.answers.选择题答案=choosedCollecion
					actmodel.上传到= userid+"---收到的回答"
					actmodel.uploadTime= Date.now().toString()
					var subjansCollection =[]
			$("input[class='subjanswers']").each(function() {		
			  subjansCollection.push($(this).val())
			})
			actmodel.answers.主观题答案= subjansCollection
			var jsoncontent =(JSON.stringify(actmodel))
			console.log(actmodel)
			$.ajax({
					type:'POST',
					url:'/myactivities/',
					contentType: "application/json",
					data:  jsoncontent,
					success: function(){console.log('上传请求已发送')
					},
					}).then((res)=>{
						alert(res+`\n`+"上传成功")
						
					})

		     }



					/********************************************************************载入选择题****************************************/
					$.ajax({
					type:'GET',
					url:'/mymulti',
					contentType: "application/json",
					data: body ={"获取":"全部选择题","用户":`${userid}` },
					success: function(){console.log('获取请求已发送')
					},
					}).then((res)=>{
						var recieve = JSON.parse(res)
					console.log(recieve.编辑好的选择题)
					var n =0 
					$.each(recieve.编辑好的选择题.问题,function(key,value){
						
						var EACHQanswers=[]
					 for (const ans of value){
						 if (ans== recieve.编辑好的选择题.答案[n]){
							EACHQanswers.push({text :ans, correct: true})
						 }else{
						 EACHQanswers.push({text :ans, correct: false})
						}
					}
					questions.push({
					question: key,
					answers: EACHQanswers
					})
					n++
					})
					console.log(questions)
				    })

                document.getElementById("btn2").onclick=function(){
					if (document.getElementById('divide1').classList.contains('hide')){
					document.getElementById('divide1').classList.remove('hide')	}	
					else{
						document.getElementById('divide1').classList.add('hide')
					}	
				}
				document.getElementById("btn1").onclick=function(){
					if (document.getElementById('divide2').style.display!= 'none'){
						$('#divide2').fadeOut(1000);       
					}
        
					else{$('#divide2').css({opacity: 0, display: 'flex'}).animate({
						opacity: 1
					}, 1000)
						
					}		
				}
              
			    const startButton = document.getElementById('start-btn')
				const nextButton = document.getElementById('next-btn')
				const questionContainerElement = document.getElementById('question-container')
				const questionElement = document.getElementById('question')
				const answerButtonsElement = document.getElementById('answer-buttons')
				
				
				let shuffledQuestions, currentQuestionIndex
				
				startButton.addEventListener('click', startGame)
				nextButton.addEventListener('click', () => {
				  currentQuestionIndex++
				  setNextQuestion()
				})
				
				function startGame() {
				  startButton.classList.add('hide')
				  shuffledQuestions = questions.sort(() => Math.random() - .5)
				  currentQuestionIndex = 0
				  questionContainerElement.classList.remove('hide')
				  setNextQuestion()
				}
				
				function setNextQuestion() {
				  resetState()
				  showQuestion(shuffledQuestions[currentQuestionIndex])
				}
				
				function showQuestion(question) {
				  questionElement.innerText = question.question
				  question.answers.forEach(answer => {
					const button = document.createElement('button')
					button.setAttribute('class','answerbtn')
					button.innerText = answer.text
					button.classList.add('btn')
					if (answer.correct) {
					  button.dataset.correct = answer.correct
					}
					button.addEventListener('click', selectAnswer)
	
					answerButtonsElement.appendChild(button)
				  })
	
				}
				


					// $.ajax({
					// type:'POST',
					// url:'http://localhost:3000/mymulti/upload',
					// contentType: "application/json",
					// data: questions,
					// success: function(){console.log('请求登录发送 SUCCESS')
					// },
					// }).then((res)=>{
					// console.log(res)

					
					// })

				
				// app.get("uploadanswers/:answer/:id", (req,res)=>{
				//   var para =req.params
				//   res.send('这是来自'+para.id+'的答案'+'//'+ para.answer)
				// })
				
				// const express =require('express');
				// const router = express.Router();
				// router.use(function(req, res, next) {
				//   console.log(req.url, "@", Date.now());
				//   next();
				// });
				// router
				//   .route("/:anser/:id")
				//   .get((req, res) => {
					
				//     uploadanswer
				//   })
				//   .post((req, res) => {
				//     res.send("收到 "+id+'的答案'+' '+answer)
				//   });
				
				// function uploadanswer(request, response) {
				//   var data = request.params;
				//   var answer = data.answer;
				//   var id = data.id;
				//   var reply;
				//   if (!id) {
				//     var reply = {
				//       msg: '请先登录.'
				//     };
				//     response.send(reply);
				//   } else {
				//     answers[id] = answer;
				//     var data = JSON.stringify(answers, null, 2);
				//     fs.writeFile('queanswers.json', data, uploadfinished);
				//     function uploadfinished(err) {
				//       console.log('已录入答案.');
				//       reply = {
				//         账户: id,
				//         答案: answers[id],
				//         status: '成功'
				//       };
				//       response.send(reply);
				//     }
				//     }
				//   }
				 
				  
				function resetState() {
				  clearStatusClass(document.getElementById('divide1'))
				  nextButton.classList.add('hide')
				 
				  while (answerButtonsElement.firstChild) {
					answerButtonsElement.removeChild(answerButtonsElement.firstChild)
				  }
				}
				var choosedCollecion =[]
				
				function selectAnswer(e) {
				  const selectedButton = e.target
				  const correct = selectedButton.dataset.correct
				   var choicename =this.innerText
                   mouse={X:event.screenX,Y: event.screenY}
                  choosedCollecion.push( { [`${choicename}`] : mouse} )
				  setStatusClass(document.body, correct)
				  Array.from(answerButtonsElement.children).forEach(button => {
					setStatusClass(button, button.dataset.correct)
				  })
				  if (shuffledQuestions.length > currentQuestionIndex + 1) {
					nextButton.classList.remove('hide')
				  } else {
					startButton.innerText = 'Restart'
					startButton.classList.remove('hide')
				  }
				}
				
				function setStatusClass(element, correct) {
				  clearStatusClass(element)
				  if (correct) {
					element.classList.add('correct')
				  } else {
					element.classList.add('wrong')
				  }
				}
				
				function clearStatusClass(element) {
				  element.classList.remove('correct')
				  element.classList.remove('wrong')
				}
				
				var questions =    [
				  {
					question: '以下哪个是美剧？',
					answers: [
					  { text: '越狱', correct: true },
					  { text: 'IT狂人', correct: false }
					]
				  },
				  {
					question: '以下哪个是食物？',
					answers: [
					  { text: 'California', correct: false },
					  { text: 'pan', correct: true },
					  { text: 'cock tail', correct: false },
					  { text: 'Big Ben', correct: false }
					]
				  },
				  {
					question: '以下哪个是计算机的缩写',
					answers: [
					  { text: 'CPU', correct: false },
					  { text: 'PC', correct: true },
					  { text: 'Personal Computer', correct: false },
					  { text: 'client', correct: false }
					]
				  },
				  {
					question: '以下哪个是美国人?',
					answers: [
					  { text: '卷福', correct: false },
					  { text: 'Əli', correct: false },
					  { text: 'Katyusha', correct: false },
					  { text: 'Itsuki', correct: false },
					  { text: 'Prince Charles', correct: false },
					  { text: 'Leonardo DiCaprio', correct: true }
					]
				  }
				]

				}
				else{
					alert('请先登录')
				}
				
	</script>		

		
        

   
    </html>